<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加学生</title>
</head>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="../../js/fun.js"></script>



<body>
<form class="layui-form layui-form-pane" action="">


        <div class="layui-form-item" id="colist">

        </div>

        <div class="layui-form-item" id="majorlist">

        </div>

        <div class="layui-form-item" id="classlist">

        </div>

    <div class="layui-form-item">
        <label class="layui-form-label">学生名字</label>
        <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入名字" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <select name="sex" lay-verify="required" class="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">登录密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" required  lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">注册</button>
        </div>
    </div>
</form>
</body>




<!--院系模板-->
<script id="co" type="text/html">
    <div>

                <label class="layui-form-label test" >院系</label>
                <div class="layui-input-block">
                    <select name="co" lay-verify="required" id="cco" lay-filter="cco" >
                        {{#  layui.each(d, function(index, item){ }}
                        <option value="{{item.id}}">{{item.name}}</option>
                        {{#  }); }}

                    </select>

            </div>
    </div>
</script>

<!--专业模板-->
<script id="major" type="text/html">
    <div>

        <label class="layui-form-label">专业</label>
        <div class="layui-input-block">
            <select name="major" lay-verify="required" id="cmajor" lay-filter="cmajor">
                {{#  layui.each(d, function(index, item){ }}
                <option value="{{item.id}}">{{item.name}}</option>
                {{#  }); }}
            </select>

        </div>
    </div>
</script>

<!--班级模板-->
<script id="tclass" type="text/html">
    <div>

            <label class="layui-form-label test" >班级</label>
            <div class="layui-input-block">
                <select name="tclass" lay-verify="required" id="cclass" lay-filter="cclass" >
                    {{#  layui.each(d, function(index, item){ }}
                    <option value="{{item.id}}">{{item.name}}</option>
                    {{#  }); }}

                </select>

        </div>
    </div>
</script>

<script>

    // 数据的定义
    window.colist = [];
    window.majorlist = [];
    window.classlist = [];

function  load(){
    layui.use(['form','layer','laytpl'], function(){
        window.form = layui.form;
        window.layer = layui.layer;
        window.laytpl = layui.laytpl


        $.post(Api+"/co/getList",{},function (data){
            if(data.code != "0"){
                layer.msg("请求失败")
            }else {
                colist =  data.data

                var getTpl = co.innerHTML
                    ,view = document.getElementById('colist');
                    laytpl(getTpl).render(data.data, function(html){
                    console.log(html)
                    view.innerHTML = html;
                    form.render()



                        form.on('select(cco)', function(data){
                            let coid = data.value

                            $.post(Api+"/major/getList",{cid:coid},function (data){
                                if(data.code != "0"){
                                    layer.msg("请求失败")
                                }else {

                                    let getTpl = major.innerHTML
                                        ,view = document.getElementById('majorlist');
                                    laytpl(getTpl).render(data.data, function(html){

                                        view.innerHTML = html;

                                        form.render()

                                        form.on('select(cmajor)', function(data){
                                            let id = data.value

                                            $.post(Api+"/class/getList",{major:id},function (data){
                                                if(data.code != "0"){
                                                    layer.msg("请求失败")
                                                }else {

                                                    let getTpl = tclass.innerHTML
                                                        ,view = document.getElementById('classlist');
                                                    laytpl(getTpl).render(data.data, function(html){

                                                        view.innerHTML = html;

                                                        form.render()
                                                    });

                                                }
                                            })
                                        });

                                    });

                                }
                            })
                        });

                });

            }
        })


        //监听提交
        form.on('submit(formDemo)', function(data){
            // layer.msg(JSON.stringify(data.field));
            let registData = data.field

            $.post(Api+"/stu/regist",{
                name:registData.name,
                password:registData.password,
                "class":registData.tclass,
                sex:registData.sex
            },function (res){
                if(res.code == "200"){
                    layer.open({
                        title:"提示",
                        content:"注册成功，他的学号为: "+res.data.id
                    })
                }else {
                    layer.msg("注册失败")
                }
            })
            return false;
        });


    });

}

    document.addEventListener("DOMContentLoaded", load);

</script>
</html>